<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园失物招领管理系统 - 管理员登录</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .brand-logo {
            font-family: 'Pacifico', serif;
        }
        .input-icon {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .toggle-password {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .captcha-image {
            background-color: #f3f4f6;
            cursor: pointer;
        }
    </style>
</head>
<body class="min-h-screen bg-gray-50">
    <div class="flex min-h-screen">
        <!-- 左侧品牌区域 -->
        <div class="hidden md:flex md:w-2/5 bg-primary relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-r from-primary to-blue-500 opacity-90"></div>
            <div class="relative z-10 p-12 flex flex-col h-full text-white">
                <div class="flex items-center mb-12">
                    <div class="text-3xl brand-logo">logo</div>
                    <div class="ml-3 text-xl font-semibold">校园失物招领管理系统</div>
                </div>
                
                <div class="flex-1 flex flex-col justify-center">
                    <h2 class="text-4xl font-bold mb-6">高效管理校园失物招领</h2>
                    <p class="text-lg opacity-90 mb-8 leading-relaxed">
                        为校园师生提供便捷的失物招领服务，通过数字化管理提升物品找回率，构建和谐校园环境。
                    </p>
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                            <i class="fas fa-check text-xl"></i>
                        </div>
                        <div>
                            <div class="font-medium">安全可靠</div>
                            <div class="text-sm opacity-80">数据加密存储，保障信息安全</div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-auto">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-university"></i>
                        <span>清华大学信息化办公室认证</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧登录区域 -->
        <div class="w-full md:w-3/5 flex items-center justify-center p-8">
            <div class="w-full max-w-md bg-white rounded-xl shadow-lg p-10">
                <div class="text-center mb-10">
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">管理员登录</h1>
                    <p class="text-gray-500">请输入您的账号和密码登录系统</p>
                </div>
                
                <form>
                    <div class="space-y-6">
                        <!-- 用户名输入 -->
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-user input-icon text-gray-400"></i>
                                </div>
                                <input 
                                    id="username" 
                                    name="username" 
                                    type="text" 
                                    required 
                                    class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                    placeholder="请输入管理员账号">
                            </div>
                        </div>
                        
                        <!-- 密码输入 -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-lock input-icon text-gray-400"></i>
                                </div>
                                <input 
                                    id="password" 
                                    name="password" 
                                    type="password" 
                                    required 
                                    class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                    placeholder="请输入密码">
                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="far fa-eye toggle-password text-gray-400 hover:text-gray-600" onclick="togglePasswordVisibility()"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 验证码 -->
                        <div>
                            <label for="captcha" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                            <div class="flex space-x-3">
                                <div class="relative flex-1">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-shield-alt input-icon text-gray-400"></i>
                                    </div>
                                    <input 
                                        id="captcha" 
                                        name="captcha" 
                                        type="text" 
                                        required 
                                        class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                        placeholder="请输入验证码">
                                </div>
                                <div class="w-28 h-12 flex items-center justify-center rounded-md captcha-image text-sm font-mono tracking-wider">
                                    A7B9
                                </div>
                            </div>
                        </div>
                        
                        <!-- 记住密码 -->
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住密码</label>
                            </div>
                        </div>
                        
                        <!-- 登录按钮 -->
                        <div>
                            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-button shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary whitespace-nowrap">
                                登录系统
                            </button>
                        </div>
                    </div>
                </form>
                
                <div class="mt-8 text-center text-sm text-gray-500">
                    <a href="#" class="font-medium text-primary hover:text-blue-700">忘记密码?</a>
                    <span class="mx-2">|</span>
                    <span>技术支持: <a href="mailto:support@campuslost.com" class="font-medium text-primary hover:text-blue-700">support@campuslost.com</a></span>
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const eyeIcon = document.querySelector('.toggle-password');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            }
        }
    </script>
</body>
</html>